<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left: 0px;
        top: 0px;
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
    <script>
      // 1.让方块运动到300px 停止；

      // var timer =  setInterval(function(){
      //     var boxEle = document.querySelector(".box");
      //     var num = parseInt(getComputedStyle(boxEle)['left']);
      //     // console.log(num);

      //     var speed = 5;
      //     // if(num==300){
      //     //     clearInterval(timer);
      //     // }else{
      //         boxEle.style.left = num+speed + "px";
      //     // }
      //     if((num+speed)==300){
      //         clearInterval(timer);
      //     }
      // },10)

      // 2.让方块向右运动到300px 然后再向下运动到300px 停止；

      function move(boxEle, dir, dis, cb) {
        var timer = setInterval(function () {
          var num = parseInt(getComputedStyle(boxEle)[dir]);
          // console.log(num);

          var speed = 5;
          // if(num==300){
          //     clearInterval(timer);
          // }else{
          boxEle.style[dir] = num + speed + "px";
          // }
          if (num + speed == dis) {
            clearInterval(timer);
            // if(cb){
            //     cb();
            // }
            cb && cb();
          }
        }, 10);
      }

      var boxEle = document.querySelector(".box");
      move(boxEle, "left", 300, function () {
        console.log("运动完成111");
        move(boxEle, "top", 400, function () {
          console.log("运动完成2222");
        });
      });

      // move(boxEle,"top");
    </script>
  </body>
</html>
